<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import { descriptionProps } from "element-plus";
import {ref} from "vue";

/**
 *  <div class="item-title">
        <p>推荐医生</p>
      </div>
      <ul>
        <li @click="doctorDialog=true">
          <img src="../assets/img/doctor1.jpg" />
          <h3>刘长胜</h3>
          <p>主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor2.jpg" />
          <h3>孙鹿</h3>
          <p>主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor3.jpg" />
          <h3>吕文达</h3>
          <p>主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor4.jpg" />
          <h3>李若辰</h3>
          <p>主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor5.jpg" />
          <h3>张石凡</h3>
          <p>主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor6.jpg" />
          <h3>赵桂凤</h3>
          <p>副主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor7.jpg" />
          <h3>李文</h3>
          <p>主任医师</p>
        </li>
        <li>
          <img src="../assets/img/doctor8.jpg" />
          <h3>吴晓梦</h3>
          <p>主任医师</p>
        </li>
      </ul>
 */
const deoctlist=ref([
  {
    name:'孙思邈',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor1.jpg',
    unit:'肛肠科',
    description:'经历：成都市分院肛肠科主任;从医十年；对于处理肝门异物有着丰富经验'
  },
  {
    name:'叶文浩',
    id:2,
    job:'主任医师',
    avatar:'/src/assets/img/doctor2.jpg',
    unit:'心血管内科',
    description:'专长: 心血管疾病诊断与治疗: 拥有20余年临床经验,擅长心脏介入手术'
  },
  {
    name:'吕文达',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor3.jpg',
    unit:'儿科',
    description:'擅长：儿童呼吸道疾病及消化系统疾病的诊治；对新生儿护理有深入研究'
  },
  {
    name:'李若辰',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor4.jpg',
    unit:'妇产科',
    description:'经验：三甲医院妇产科主任15年；擅长高危妊娠管理、妇科微创手术'
  },{
    name:'张石凡',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor5.jpg',
    unit:'眼科',
    description:'擅长：白内障、青光眼等眼科疾病的诊断与治疗；熟练掌握眼科显微手术'
  },
 
  {
    name:' 赵桂凤',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor6.jpg',
    unit:'神经外科',
    description:'专长：颅脑外伤及脑血管疾病的手术治疗；参与多项国家级科研项目'
  },
  {
    name:'李文',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor7.jpg',
    unit:'肿瘤科',
    description:'专长：恶性肿瘤的综合治疗，特别是肺癌、乳腺癌的化疗与靶向治疗；参与多项国际临床试验'
  },
  {
    name:'吴晓梦',
    id:1,
    job:'主任医师',
    avatar:'/src/assets/img/doctor8.jpg',
    unit:'中医科',
    description:'擅长：中医内科杂病，特别是慢性胃炎、失眠、月经不调的中医调理；有丰富的中医养生知识'
  },
])

const selected=ref({
  name:'',
  job:'',
  description:'',
  avatar:'',
  unit:''
});
const doctorDialog=ref(false);

function toAppointment(){
    router.push("/appointment")
}

function toReportlist(){
    router.push("/reportlist")
}

function selectdoc(item){
  console.log(item);
  selected.value=item;
  doctorDialog.value=true;
}

</script>



<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <!-- 头部 -->
    <header>
      <div class="header-content">
        <div class="header-content-left">
          <img src="../assets/img/qiqi.png"
               style="width: 30px;margin-left: 7vw;padding-top: 0.5vh"/>
          <h1>不卜庐养生堂</h1>
          <!-- <i class="fa fa-angle-down"></i> -->
        </div>
        <i class="fa fa-envelope-o"></i>
      </div>
      <div class="header-bottom"></div>
    </header>

    <div class="top-ban"></div>
    <!-- 导航部分 -->
    <nav>
      <div class="logo-img">
        <img src="../assets/img/logo.png" />
      </div>
      <ul>
        <li class="nav-item-bnt">
          <img src="../assets/img/menu01.png" />
          <div class="nav-item-text">
            <h3>免费咨询</h3>
            <p>新型冠状病毒肺炎</p>
          </div>
        </li>
        <li class="nav-item-bnt">
          <img src="../assets/img/menu02.png" />
          <div class="nav-item-text">
            <h3>网络问诊</h3>
            <p>图文视频网络咨询</p>
          </div>
        </li>
        <li class="nav-item-bnt">
          <img src="../assets/img/menu03.png" />
          <div class="nav-item-text">
            <h3><span class="menu03-h3-span">e</span>心门诊</h3>
            <p>复旦医科大学专家</p>
          </div>
        </li>
        <li class="nav-item-bnt">
          <img src="../assets/img/menu04.png" />
          <div class="nav-item-text">
            <h3>慢病管理</h3>
            <p>血压血糖健康管理</p>
          </div>
        </li>
        <li class="nav-item-bnt">
          <img src="../assets/img/menu05.png" />
          <div class="nav-item-text">
            <h3>上门护理</h3>
            <p>网上购买上门服务</p>
          </div>
        </li>
        <li @click="toAppointment">
          <img src="../assets/img/menu06.png" />
          <div class="nav-item-text">
            <h3>团检预约</h3>
            <p>团体体检套餐定制</p>
          </div>
        </li>
      </ul>
    </nav>

    <!-- 我的健康报告 -->
    <div class="report">
      <div class="item-title">
        <p>我的健康报告</p>
      </div>
      <div class="report-content">
        <p>随时随地查看体检报告</p>
        <div @click="toReportlist">立即查看</div>
      </div>
    </div>

    <!--consultation-->
    <el-dialog v-model="doctorDialog" width="80vw">
      <div style="display: flex;flex-direction: row;justify-content: center;align-items: flex-start">
        <img :src="selected.avatar" style="width: 100px;height: 100px" />
        <div>
          <div style="margin-left: 10px">{{ selected.name }}</div>
          <div style="margin-left: 10px">科室：{{ selected.unit }}</div>
          <div style="margin-left: 10px">{{ selected.description }}</div>
        </div>
      </div>
      <el-button type="primary" style="margin-top: 10px" @click="
      router.push({
        path:'/paidconsulation',
        query:{
          name:selected.name,
          id:selected.id
        }
      })
      ">
        付费问诊
      </el-button>

    </el-dialog>


    <!-- 推荐医生 -->
    <div class="doctor">
      <div class="item-title">
        <p>推荐医生</p>
      </div>
      <ul >
        <li @click="selectdoc(item)" v-for="(item,index) in deoctlist" :key="index">
          <img :src="item.avatar" />
          <h3>{{ item.name }}</h3>
          <p>{{ item.job }}</p>
        </li>
      </ul>
    </div>

    <!-- 健康评估 -->
    <div class="assess">
      <div class="item-title">
        <p>健康评估</p>
        <span>更多</span>
      </div>
      <div class="assess-content">
        <div class="scroll-box" id="scrollBox">
          <ul id="scrollBar">
            <li><img src="../assets/img/assess1.png" /></li>
            <li><img src="../assets/img/assess2.png" /></li>
            <li><img src="../assets/img/assess3.png" /></li>
            <li><img src="../assets/img/assess4.png" /></li>
            <li><img src="../assets/img/assess5.png" /></li>
            <li><img src="../assets/img/assess6.png" /></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 健康咨询 -->
    <div class="info">
      <div class="item-title">
        <p>健康咨询</p>
      </div>
      <ul>
        <li>
          <img src="../assets/img/info1.png" />
          <div>
            <h3>查出肺结核，我是不是要得肺癌了？</h3>
            <span>肺结核一定会导致肺癌吗？</span>
            <p><i class="fa fa-commenting-o"></i>3699</p>
          </div>
        </li>
        <div class="middle-ban"></div>
        <li>
          <img src="../assets/img/info2.png" />
          <div>
            <h3>体检发现甲状腺结节，怎么办？</h3>
            <span>日常需注意什么？</span>
            <p><i class="fa fa-commenting-o"></i>4256</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="bottom-ban"></div>

    <!-- footer -->
    <Footer></Footer>
  </div>
</template>

<style scoped>
@import "@/assets/css/index.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
</style>
